<template>
	<view class="content">
		<u-navbar title-color="#FFFFFF" :is-back="true" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true"
		 back-icon-name="grid" title="首页" :custom-back="toMenuList">
			<view class="navbar-right" slot="right">
				<u-icon color="#FFFFFF" name="account" size="38" @click="toUserInfo"></u-icon>
			</view>
		</u-navbar>
		<!--内容区域-->
		<baidu-map class="map" @ready="initMap" :center="center" :zoom="15" :scroll-wheel-zoom="true">
			<bm-control anchor="BMAP_ANCHOR_TOP_RIGHT">
				<view style="right: 20px;box-shadow: 0 0 6px 0 #DDDDDD;border-radius: 3px;background: #FFFFFF;">
			      <view class="mapmark" style="margin-top: 8px;" @click="setMapType('bz')">
			      	<view><image :class="bzimage" src="../../static/img/map_biaozhun.png"></view>
			      	<view style="font-size: 8px;color: #333333;">标准地图</view>
			      </view>
			      <view class="mapmark" @click="setMapType('wx')">
			      	<view><image :class="wximage" src="../../static/img/map-weixing.png"></view>
			      	<view style="font-size: 8px;color: #333333;">卫星地图</view>
			      </view>
				 </view>
			</bm-control>
			<bm-marker v-for="item in unFinishFireList" :key="item.ucId" :position="{lng: item.longitude, lat: item.latitude}" @click="infoWindowOpen(item)"></bm-marker>
			<bm-info-window :position="{lng: infoWindow.longitude, lat:infoWindow.latitude}" title="火情信息提示窗" :show="infoWindowShow" @close="infoWindowShow=false">
			    <h4>{{infoWindow.name}}</h4>
			    <p>所属主体：{{infoWindow.enterpriseName}}<br></p>
			    <p>所属建筑：{{infoWindow.buildName}}<br></p>
			    <p>详细位置：{{infoWindow.loaction}}<br></p>
			    <p>确认时间：{{infoWindow.fireConfirmTime|dateFormat}}<br></p>
			</bm-info-window>
		</baidu-map>

		<!-- <view class="right-top">
   			<view class="circle" style="margin-top: 8px;" @click="fireAlarm()">
				<view><image style="height: 24.6px; width: 23.9px;margin-top: 1px;" src="../../static/img/count-fire.png"></view>
				<view style="font-size: 8px;color: #333333;">一键报警</view>
			</view>
			<view class="circle" style="margin-top: 8px;" @click="isOpen = true">
				<view><image style="height: 24.6px; width: 23.9px;margin-top: 1px;" src="../../static/img/qiandao.png"></view>
				<view style="font-size: 8px;color: #333333;">签到</view>
			</view>
		</view> -->
		<view class="qiandao" v-if="isOpen">
			<view class="title">签到</view>
			<view>
				<u-form :model="userForm" ref="userForm" label-width="140">
					<u-form-item label="企业名称:">{{userInfo.enterpriseName}}</u-form-item>
					<u-form-item label="姓名:">{{userInfo.name}}  </u-form-item>
					<u-form-item label="体温:"><input type="bodyTemperature" v-model="userForm.bodyTemperature" placeholder="请输入体温" /></u-form-item>
				</u-form>
			</view>
			<view class="bottom">
				<u-button type="primary" :plain="true" size="mini" style="margin-right: 20px;" @click="isOpen=false">取 消</u-button>
				<u-button type="primary" size="mini" @click="sign()">签 到</u-button>
			</view>
		</view>
		<view class="footer">
			<u-grid style="height: 48px;" :col="4" :border="false">
				<u-grid-item style="padding: 0;" v-for="(item,index) in menuList" :name="item.title" :key="index" :index="index" @click="itemClick(item)">
					<u-badge v-if="item.badge!=0" :count="item.badge" :offset="[20,30]"></u-badge>
					<image style="height: 22px; width: 22px;" :src="item.icon">
					<!-- <u-icon :name="item.icon" :color="item.color" custom-prefix="el-icon-if" :size="46"></u-icon> -->
					<view style="font-size: 8px;" class="grid-text">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal v-model="show" :content="content"></u-modal>
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	import store from "../../store/index.js"
	export default {
		data() {
			return {
				// 地图 维度经度
				latitude: 42.819383,
				longitude: 93.515082,
				title: 'Hello',
				bzimage: 'imagea',
				wximage: 'imagep',
				tel: '',
				userForm: {
					bodyTemperature: "",
				},
				aliRtcEngine: {},
				current: 0,
				userInfo: {},
				websock:{},
				show:false,
				content:'',
				center:{},
				showMsg:false,
				noticeContent:'',
				noticeId:'',
				map:{},
				menuList:[
					{
						badge:0,
						icon:'../../static/img/icon1.png',
						color:"#5098FF",
						title:"建筑信息",
						path:'/pages/index/build/list',
					},
					{
						badge:0,
						icon:'../../static/img/icon2.png',
						color:"#5098FF",
						title:"维保工单",
						path:'/pages/index/workorder/maintenance/list',
					},
					{
						badge:0,
						icon:'../../static/img/icon3.png',
						color:"#5098FF",
						title:"维保任务",
						path:'/pages/maintenance/task/list',
					},
					{
						badge:0,
						icon:'../../static/img/icon5.png',
						color:"#5098FF",
						title:"消息",
						path:'/pages/index/notice/list',
					}
					
				],
				beforeUnloadTime: '',
				gapTime: '',
				noticeVal:0,
				joinChannel:false,
				isOpen:false,
				noticeInfo:{},
				timeout: 30 * 1000,//30秒一次心跳
				timeoutObj: null,//心跳心跳倒计时
				serverTimeoutObj: null,//心跳倒计时
				timeOutNum: null,//断开 重连倒计时
				unFinishFireList:[],
				infoWindow:{},
				infoWindowShow:false,
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.joinChannel=false
			this.updateMobileInfo()
			this.getUserNoReadNotice() 
		},
		methods: {
			sign() {
				this.utils.request("/api/app/user/sign",this.userForm,"post","app",true).then(res=>{
					this.$refs.uToast.show({
						title: '签到成功',
						type: 'success',
						url: '',
						back: false
					})
					this.isOpen = false
				}).catch(error=>{
					this.$refs.uToast.show({
						title: '签到失败',
						type: 'error',
						url: ''
					})
				})
			},
			initMap({BMap,map}) {
				this.map = map
				this.getUnFinishFireInfoList()
				//getApp().globalData.BMap = BMap
				let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
				var geolocation = new BMap.Geolocation();
				geolocation.enableSDKLocation();
				geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					sessionStorage.setItem("location",JSON.stringify(r))
					var mk = new BMap.Marker(r.point);
					_this.center={lng: r.longitude, lat: r.latitude};
					map.addOverlay(mk);
					map.panTo(r.point);
				}else {
					alert('failed'+this.getStatus());
				}},{enableHighAccuracy: true})
			},
			setMapType (type){
				if("bz" == type){
					this.bzimage = 'imagea'
					this.wximage = 'imagep'
					this.map.setMapType(BMAP_NORMAL_MAP);
				} else {
					this.bzimage = 'imagep'
					this.wximage = 'imagea'
					this.map.setMapType(BMAP_HYBRID_MAP);
				}
			},
			getUserInfo() {
				this.utils.request("/api/app/user/getUserInfo", {}, "get", "app", true).then(res => {
					console.log(res)
					this.userInfo = res.data
					store.dispatch("webSocket/webSocketInit",res.data.ucId)
					store.dispatch("user/setRoleCode", this.userInfo.roleCode)
					utils.setCacheData("userInfo", JSON.stringify(res.data))
			        window.native.bindJgAccount(res.data.ucId,res=>{
						console.log(res)
			        })
					h5GetJs.setUserInfo(JSON.stringify(res.data))
					store.dispatch("user/setUserInfo", this.userInfo)
				}).catch(error => {
					console.log(error)
				})
			},
			getUserNoReadNotice() {
				this.utils.request("/api/app/user/getUserNoReadNotice", {}, "get", "app", true).then(res => {
					console.log(res)
					this.noticeVal=res.data
				}).catch(error => {
					console.log(error)
				})
			},
			updateMobileInfo(){
				window.native.getMobileInfo(res=>{
					let mobileInfo = res.data
					let obj = {
						"deviceId":mobileInfo.deviceId,
						"aliDeviceId":mobileInfo.aliDeviceId,
						"model":mobileInfo.brand+" "+mobileInfo.model
					}
					this.utils.request("/api/app/user/updateMobileInfo", obj, "post", "app", true).then(res => {
						console.log(res)
					}).catch(error => {
						console.log(error)
					})
				})
			},
			toUserInfo() {
				uni.navigateTo({
					url: "/pages/account/index"
				})
			},
			toMenuList() {
				uni.navigateTo({
					url: "/pages/index/menu_wb"
				})
			},
			receiveList() {
				uni.navigateTo({
					url: "/pages/index/task/receive"
				})
			},
			myTasks() {
				uni.navigateTo({
					url: "/pages/index/task/list"
				})
			},
			messageCenter(){
				uni.navigateTo({
					url: "/pages/index/notice/list"
				})
			},
			fireAlarm(){
				uni.navigateTo({
					url: "/pages/index/fireAlarm"
				})
			},
			itemClick(item){
				uni.navigateTo({
					url:item.path
				})
			},
			confirm() {
				if (this.noticeInfo.audio == 'true') {
					window.native.closeAudio(9)
				}
				if(this.noticeInfo.audioOpen=='true'){
					window.native.openAudio(this.noticeInfo.audioId)
				}
				if(this.noticeInfo.audioOpen=='false'){
					window.native.closeAudio(this.noticeInfo.audioId)
				}
				this.utils.request("/api/app/notice/updateReadStatus", {ucId:this.noticeInfo.noticeInfoId}, "post", "app", true).then(res => {
					console.log(res)
				}).catch(error => {
					console.log(error)
				})
				if (this.noticeInfo.equRounds == 'true') {
					window.native.equRounds({
						title: this.noticeInfo.equipmentId,
						drill: this.noticeInfo.drill,
						ucId: this.noticeInfo.alarmInfoId,
						taskId: this.noticeInfo.taskId
					})
				}
			},
			getUnFinishFireInfoList(){
				this.utils.request("/api/admin/fireInfo/getUnFinishFireInfoList", {}, "post", "app", true).then(res => {
					this.unFinishFireList = res.data
					console.log(res)
				}).catch(error => {
					console.log(error)
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.map {
		width: 100%;
		height: calc(100vh - 48px);
		.imagep{
			height: 24.6px; 
			width: 23.9px;
			margin-top: 1px;
		}
		.imagea{
			height: 24.6px; 
			width: 23.9px;
			margin-top: 1px;
			border: 1px solid rgb(46, 132, 255);
		}
	}

	.logo {
		height: 200px;
		width: 200px;
		margin-top: 200px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50px;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36px;
		color: #8f8f94;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	.footer{
		position: absolute;
		bottom: 0px; 
		background: #ffffff;
		width: 100%;
		height: 48px;
	}
	.right-top{
		position: absolute;
		right: 10px;
		top: 160px;
	}
	.circle{
		width: 48px;
		height: 48px;
		padding: 5px;
		text-align: center;
		background: #FFFFFF;
		box-shadow: 0 0 6px 0 #DDDDDD;
		border-radius: 3px;
	}
	.mapmark{
		width: 48px;
		height: 48px;
		padding: 5px;
		text-align: center;
		background: #FFFFFF;
		border-radius: 3px;
	}
	.anchorTR{
		right: 10px !important;
	}
	
	.qiandao{
		position: absolute;
		left: 6%;
		top: 25%;
		width: 88%;
		background-color: #FFFFFF;
		height: 300px;
		border-radius: 5px;
		padding: 15px;
		box-shadow: rgb(51, 54, 62) 0px 0px 6px 0px;
		.title{
			text-align: center;
			font-size: 20px;
			color: #000000;	
		}
		.bottom{
			width: 100%;
			position: absolute;
			bottom: 20px; 
			text-align: center;
		}
	}
</style>
